<template>
  <canvas id="three"></canvas>

</template>

<script>
import {initThree} from "../utils/enviromentUtil";
import * as three from 'three'
import * as Tween from 'three/examples/jsm/libs/tween.module'

export default {
  name: "tween",
  data() {
    return {
      scene: '',
      renderer: "",
      camera: "",
      orbitControls: "",
    }
  },
  mounted() {
    initThree.call(this)
    this.initSphereGeometries()
  },
  methods: {
    initSphereGeometries() {
      let sphere = new three.Mesh(new three.SphereGeometry(20), new three.MeshBasicMaterial({color:0x00dd00}))

      //https://github.com/tweenjs/tween.js
      let tween = new Tween.Tween(sphere.position, false)

      tween.to({
        x: 80,
        y: 50
      }, 1000)
        .onUpdate(() => {
          console.log(sphere.position.x, sphere.position.y)
        })

      tween.repeat(Infinity)
      // 设置循环往复
      tween.yoyo(true)
      // https://tweenjs.github.io/tween.js/examples/03_graphs.html
      // 设置速度曲线
      tween.easing(Tween.Easing.Quartic.InOut)

      this.scene.add(sphere)

      let animate = () => {


        tween.update()

        this.renderer.render(this.scene, this.camera)

        requestAnimationFrame(animate)
      }

      animate()
    }
  }
}
</script>

<style scoped>
#three {
  width: 100%;
  height: 100%;
}
</style>
